<script>
export default {
  name: 'change-state',
  data() {
    return {
      searchData: {
        keywords: ''
      },
      config: {
        title: "变更状态",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xeb86;",
            position: "left",
          },
        ],
      },
    }
  }
}
</script>

<template>
  <view>
    <hx-navbar ref="hxnb" :config="config">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <u-search placeholder="搜索" v-model="searchData.keywords" :showAction="false"></u-search>
          </view>
        </template>
      </view>
    </hx-navbar>

    <view class="main">
      <u--form
          labelPosition="left"
          ref="uForm"
      >
        <u-form-item
            label="状态"
            borderBottom
        >
          <view>
            <text class="input-text">{{ '请选择状态' }}</text>
          </view>
        </u-form-item>
        <u-form-item
            label="车牌"
            borderBottom
        >
          <view>
            <text class="input-text">{{ '请选择车牌' }}</text>
          </view>
        </u-form-item>
      </u--form>

      <view class="info">
        <view>
          <text class="text">羽亮纺织</text>
        </view>
        <view>
          <text class="text">共: 0单</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .input-product {
    width: 95%;
    margin: 20upx auto;
    border-radius: 50upx;
    height: 70upx;
    line-height: 70upx;
    color: #fff;
    display: flex;
  }

  .main {
    padding: 10rpx 30rpx;
    padding-bottom: 40rpx;
    margin-top: 110rpx;
    background-color: #fff;

    .info {
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;

      .text {
        color: #dddddd;
      }
    }

    .input-text {
      color: #b3b3b3;
    }
  }
</style>
